<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>弹性盒属性flex-wrap</title>
		<style>
			.box{
				min-height: 160px;
				display: flex;/*指定弹性盒的容器*/
				/*flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。*/
				flex-flow: column;
				/*
				justify-content:
				flex-start（默认值）：左对齐
				flex-end：右对齐
				center： 居中
				space-between：两端对齐，项目之间的间隔都相等。
				space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
				*/
				justify-content: center;/*设置弹性盒子元素向行中间位置对齐*/
				/*
				align-items:
				flex-start：交叉轴的起点对齐。
				flex-end：交叉轴的终点对齐。
				center：交叉轴的中点对齐。
				baseline: 项目的第一行文字的基线对齐。
				stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
				*/
				align-items: center;/*弹性盒子元素向垂直于轴的方向上的中间位置对齐*/
				background-color: black;
				opacity: 0.5;
			}
			.box div{
				background-color: white;
				height: 100px;
				width: 100px;
				background-color: yellow;
				margin: 10px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="A">A</div>
			<div class="B">B</div>
			<div class="C">C</div>
			<div class="C">D</div>
			<div class="C">E</div>
			<div class="C">F</div>
		</div>
	</body>
</html>
